import "../styles/List.scss"
import React, { Component } from 'react';
import pic2 from '../assets/01-首页-快捷入口_01.png'

class List extends Component {
    constructor(props) {
        super(props);
        this.state = { //state中保存的值就是组件的状态
            list: [
                { pic2, historyPrice: '￥303', price: '￥195', text: '护肤' }, { pic2, historyPrice: '￥303', price: '￥195', text: '彩妆' }, { pic2, historyPrice: '￥303', price: '￥195', text: '香氛' },
                { pic2, historyPrice: '￥303', price: '￥195', text: '进口酒' }, { pic2, historyPrice: '￥303', price: '￥195', text: '国产酒' }, { pic2, historyPrice: '￥303', price: '￥195', text: '精品奢货' },
                { pic2, historyPrice: '￥303', price: '￥195', text: '食品百货' }, { pic2, historyPrice: '￥303', price: '￥195', text: '母婴专区' }, { pic2, historyPrice: '￥303', price: '￥195', text: '直播专区' },
            ]
        }
    }
    render() {
        return (
            <div className="list">
                <div className="list2">
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <div className="item" key={index}>
                                    <div className="img-box">
                                        <img src={item.pic2} alt="" />
                                        <span>{item.text}</span>
                                    </div>
                                    <div className="text">
                                        <span className="s1">{'原价' + item.historyPrice}</span>
                                        <span className="s2">{'活动价' + item.price}</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default List;
